<template>
  <div class="app-container home">
    <div class="home-header">
      <el-row>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <HomeUser :nick-name="storeUser.nickname" :avatar="storeUser.avatar" />
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <HomeWeather api-key="701dcbee47744832822a6f57614b0140" location="101010100" />
        </el-col>
      </el-row>
    </div>

    <div class="home-content">
      <el-row :gutter="10">
        <HomeState :stateData="stateData" @addState="addState" @deleteState="deleteState" />
        <HomeCalendar :calendarValue="calendarValue" />
      </el-row>
    </div>
  </div>
</template>

<script setup name="Index" lang="ts">
import { ref } from 'vue'
import { useUserStore } from '@/store/modules/user'
import HomeCalendar from '@/views/home/calendar/index.vue'
import HomeState from '@/views/home/state/index.vue'
import HomeUser from '@/views/home/user/index.vue'
import HomeWeather from '@/views/home/weather/index.vue'
const storeUser = useUserStore()

let stateData = ref([{
  avatar: "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png",
  msg: "曲丽丽 在 高逼格设计天团 新建项目 六月迭代",
  msgTime: new Date().toLocaleString()
}, {
  avatar: "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png",
  msg: "付小小 在 高逼格设计天团 新建项目 六月迭代",
  msgTime: new Date().toLocaleString()
}, {
  avatar: "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png",
  msg: "林东东 在 中二少女团 新建项目 六月迭代",
  msgTime: new Date().toLocaleString()
}, {
  avatar: "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png",
  msg: "周星星 将 5 月日常迭代 更新至已发布状态",
  msgTime: new Date().toLocaleString()
}]);

const totalStateData = [{
  avatar: "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png",
  msg: "曲丽丽 在 高逼格设计天团 新建项目 六月迭代",
  msgTime: ""
}, {
  avatar: "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png",
  msg: "付小小 在 高逼格设计天团 新建项目 六月迭代",
  msgTime: ""
}, {
  avatar: "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png",
  msg: "林东东 在 中二少女团 新建项目 六月迭代",
  msgTime: ""
}, {
  avatar: "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png",
  msg: "周星星 将 5 月日常迭代 更新至已发布状态",
  msgTime: ""
}, {
  avatar: "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png",
  msg: "朱偏右 在 工程效能 发布了 留言",
  msgTime: ""
}, {
  avatar: "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png",
  msg: "乐哥 在 程序员日常 新建项目 品牌迭代",
  msgTime: ""
}];

const calendarValue = ref(new Date());

function addState() {
  let data = totalStateData[getRandom(totalStateData.length)];
  data.msgTime = new Date().toLocaleString();
  stateData.value.unshift(data);
}
function deleteState() {
  stateData.value.shift();
}
function getRandom(max: number) {
  return Math.floor(Math.random() * max);
}
</script>

<style scoped lang="scss">
.home {
  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  overflow-x: hidden;
  .home-header{
    padding: 20px 0;
    box-shadow:0px 0px 12px rgba(0, 0, 0, 0.12);
  }

  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
.home-content{
  margin-top: 20px;
}
</style>
